<template>
	<view class="content display  displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="##212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">{{index==1 ?'订单消息' :'通知消息'}}</text>
			</template>
		</u-navbar>
		<scroll-view id="ceshi" scroll-y="true" class="scroll-Y  " :style="{height: scrollHeight}"
			@scrolltolower="scrolltolower">
			<view class="fn_all display  displayColumn width-100 all_item ">
				<view class="fn_all_one display  displayColumn M-T20" v-if="index1==1" v-for="(item,index1) in arr"
					:key="index1" @click="toread(item.id)">
					<view class="fnx_one display displaycenter_aliem ">
						<view class="fnx_one_left display  displaycenter_aliem">
							<image :src="imgList.img1" class="img3" mode=""></image>
							<span class="fnx_x1 M-L12">订单消息</span>
						</view>
						<view class="fnx_one_right display  M-R24" v-if="item.msgRead==1"></view>
					</view>
					<view class="fnx_two display  displaycenter_aliem" style="margin-top: 16rpx;"></view>
					<span class="fnx_ttx2 M-T20 M-L24">{{item.msgContent}}</span>
					<span class="fnx_time M-T12 M-L24">{{item.createTime}}</span>
				</view>

				<view class="fn_all_one display  displayColumn M-T20" v-if="index1=='2'" v-for="(item,index) in arr"
					:key="index" @click="toread(item.id)">
					<view class="fnx_one display displaycenter_aliem ">
						<view class="fnx_one_left display  displaycenter_aliem">
							<image :src="imgList.img2" class="img3" mode=""></image>
							<span class="fnx_x1 M-L12">通知消息</span>
						</view>
						<view class="fnx_one_right display  M-R24" v-if="item.msgRead==1"></view>
					</view>
					<view class="fnx_two display  displaycenter_aliem" style="margin-top: 16rpx;"></view>
					<span class="fnx_ttx2 M-T20 M-L24">{{item.msgContent}}</span>
					<span class="fnx_time M-T12 M-L24">{{item.createTime}}</span>
				</view>
			</view>
			<view class="display width-100" style="height: 100rpx;">
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollHeight: '90vh',
				arr: [],
				pageNum:1,
				index1: 1, //0订单 1通知
				imgList: {
					img1: this.$imgUrls + '2024/12/06/39f38c648c6f4243961bdebda3188f5d.png', //订单
					img2: this.$imgUrls + '2024/12/06/d008dde54380461a9271e34b024522fe.png', //消息
					img3: this.$imgUrls + '2024/12/06/790ed5351070454d9efc8c783e65eaa3.png', //清理
				}
			}
		},
		onLoad(index) {
			this.$modal.loading('加载中')
			this.index1 = index.id;
			
			if (this.index1 == 1) {
				this.getList(0);
			} else {
				this.getList(1);
			}

		},
		onReady() {
			const that = this
			this.$nextTick(() => {
				uni.getSystemInfo({
					success: function(res) {
						const query = wx.createSelectorQuery()
						query.select('#ceshi').boundingClientRect()
						// 获取滚动容器css数据
						query.exec((resData) => {
							if (resData && resData.length) {
								// 容器高度 = 可使用窗口高度 - 滚动容器距离顶部位置
								that.scrollHeight = (res.windowHeight - resData[0].top) * 2 +
									'rpx'
							}
						})
					},
				})
			})
		},
		methods: {
			toread(id){
				let data = {
					id:id
				};
				console.log(data)
				this.$req.put(`/xcx/userMsg/read/${data.id}`).then(res=>{
					if(res.data.code==200){
						for(let i=0;i<this.arr.length;i++){
							if(this.arr[i].id==id){
								this.arr[i].msgRead=0
							}
						}
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			alredyread(id){
				
				let data = {
					id:id
				}
				this.$req.put('/xcx/userMsg/read',data).then(res=>{
					// if(res.data.code==200){
					// 	for(let m=0,m<this.arr.length;m++){
					// 		if(this.arr[m].id == id){
					// 			this.arr[m].appMessageType = 0;
					// 			break;
					// 		}
					// 	}
					// }else{
					// 	this.$modal.msg(res.data.msg);
					// }
					
				})
			},
			// 下拉加载
			scrolltolower(){
				this.pageNum ++;
				this.getList(this.index);
			},
			getList(id) {
				let data = {
					appMessageType: id,
					pageSize: 10,
					pageNum: this.pageNum
				}
				// console.log(data)
				this.$req.get('/xcx/userMsg/list', data).then(res => {
					console.log(res)
					this.$modal.closeLoading();
					if(res.data.total==this.arr.length){
						return false;
					}
					if (res.data.code == 200) {
						this.arr = this.arr.concat(res.data.rows);
					} else {
						this.$modal.msg(res.data.msg);
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.fn_all_one {
		width: 690rpx;
		padding-bottom: 24rpx;
		padding-top: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fnx_one {
		justify-content: space-between;

	}

	.fnx_one_left {
		margin-left: 24rpx;
	}

	.fnx_one_right {
		width: 20rpx;
		height: 20rpx;
		background: #FF5449;
		border-radius: 50%;
	}

	.fnx_x1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.img3 {
		width: 30rpx;
		height: 34rpx;
	}

	.fnx_ttx2 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
		text-align: left;
	}

	.fnx_time {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.fnx_two {
		width: 690rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
	}
</style>